<template>
  <el-descriptions title="基本信息" :column="2">
    <el-descriptions-item width="50%" label="企业名称">{{ info.compName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="客户意向">
      <div style="display: inline-flex; align-items: center;">
        <span style="color: #23C023; font-size: 24px;">{{ info.clientWill }}</span>
        <span style="color: #23C023;" v-if="info.clientWill">（{{ info.clientWillName }}）</span>
      </div>
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="联系人" :span="2">
      <div style="display: inline-flex;">
        {{ info.contact }} <span v-if="info.contactJob" class="role">{{ info.contactJobName }}</span>
      </div>
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="联系电话" :span="2">{{ info.tel }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="客户来源">{{ info.source }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="营业执照" class-name="relative">
      <div style="position: absolute; margin-top: -20px; margin-left: 80px;">
        <el-image :src="info.charter" :preview-src-list="[info.charter]" style="width: 90px; height: 90px; box-shadow: 0 0 10px rgb(150 161 169 / 80%)">
          <template #error>
            <img src="/src/assets/imgLoadError.png" width="90" height="90">
          </template>
        </el-image>
      </div>
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="法人代表" :span="2">{{ info.crop }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="联系电话" :span="2">{{ info.cropTel }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="经营地址" :span="2">{{ info.addr }}</el-descriptions-item>
  </el-descriptions>
  <el-divider></el-divider>
  <el-descriptions title="经营信息" :column="2">
    <el-descriptions-item width="50%" label="经营范围">{{ info.scopeName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="客户类型">{{ info.clientTypeName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="仓储">{{ info.storageName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="物流">{{ info.logisticsName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="意向产品">{{ info.intentionName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="信息化接受度">{{ info.infoTypeName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="有无软件">{{ info.softwareName }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="经营状态">{{ info.manage }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="年交易额(万元)">{{ info.tradeMoneyPerYear }}</el-descriptions-item>
  </el-descriptions>
  <el-divider></el-divider>
  <template v-if="info.state == 'NORMAL'">
    <el-descriptions title="成交信息" :column="1" class="cus-des">
      <el-descriptions-item width="100%" span="1">
        <div class="tabBox">
          <el-table border style="width: 100%;" :data="info.list">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="合同编号" prop="createTime" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同签订日期" prop="realName" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同结束日期" prop="optType" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同金额(元)" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="合同应收款(元)" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="是否续费" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column label="已收款额(元)" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="未收款额(元)" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="成交产品(元)" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="类型/渠道/版本" prop="remark" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column label="产品型号" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column label="数量" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column label="标准单价" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column label="成交单价" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column label="折扣率(%)" prop="remark" show-overflow-tooltip></el-table-column>
            <el-table-column></el-table-column>
          </el-table>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
  </template>
  <el-descriptions title="客户留言" :column="1">
    <el-descriptions-item width="50%" label="目前服务的客户类型">{{ info.typeMes }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="希望通过信息化解决什么问题">{{ info.interMes }}</el-descriptions-item>
    <el-descriptions-item width="50%" label="期望近期什么时候解决问题">{{ info.timeMes }}</el-descriptions-item>
  </el-descriptions>
  <el-divider></el-divider>
  <template v-if="info.state == 'TRYING' || info.state == 'SHELVE'">
    <el-descriptions title="使用信息" :column="2">
      <el-descriptions-item width="50%" label="试用开始时间">{{ info.tryStartTime }}</el-descriptions-item>
      <el-descriptions-item width="50%" label="试用天数">{{ info.tryday }}</el-descriptions-item>
      <el-descriptions-item width="50%" label="试用结束时间">{{ info.tryEndTime }}</el-descriptions-item>
      <el-descriptions-item width="50%" label="剩余天数">{{ info.surday }}</el-descriptions-item>
      <el-descriptions-item width="50%" label="试用账号">{{ info.loginName }}</el-descriptions-item>
      <el-descriptions-item width="50%" label="试用版本">{{ info.curEdition }}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
  </template>
  <el-descriptions title="操作记录" :column="1" class="cus-des">
    <el-descriptions-item>
      <div class="tabBox">
        <el-table border :data="info.list">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column label="操作时间" prop="createTime" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作人" prop="realName" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作过程" prop="optType" show-overflow-tooltip></el-table-column>
          <el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
  
  export default {
    name: 'InactiveTryManageDetail'
  }
  
</script>

<script setup>
  
  import {
    ref,
    inject
  } from 'vue'
  
  const $post = inject('$post');
  const $route = inject('$route');
  
  const info = ref({});
  
  $post('/tdltry/view?guid=' + $route.query.guid).then(res => {
    info.value = res.data;
  })
  
</script>

<style scoped>
  
  .role {
    height: 21px;
    line-height: 21px;
    text-align: center;
    border: 1px solid #AEC86A;
    color: #AEC86A;
    margin-left: 15px;
    padding: 0 15px;
    border-radius: 3px;
  }
  
  .cus-des :deep(.el-descriptions__header) {
    margin-bottom: 0;
  }
  
  .cus-des :deep(.el-descriptions__table),
  .cus-des :deep(.el-descriptions__table)>tbody,
  .cus-des :deep(.el-descriptions__table)>tbody>tr, 
  .cus-des :deep(.el-descriptions__table)>tbody>tr>td {
    display: block;
  }
  
</style>
